<template>
  <div class="app-container">
    <hd-table-page
      ref="hdTable"
      :defaultData="defaultData"
      :columns="columns"
      modulePath="attendance/person"
      style="height: calc(100% - 120px)"
      dialogwidth="1200px"
      :disabledBtns="['export']">
      <template #query-deptId="{ data, field }">
        <dept-select v-model="data[field.prop]" />
      </template>
      <template #query-postId="{ data, field }">
        <el-select v-model="data[field.prop]" clearable placeholder="请选择考勤类型" style="width: 100%">
          <el-option v-for="dict in systemList" :key="dict.postId" :label="dict.postName" :value="dict.postId"></el-option>
        </el-select>
      </template>
      <template #form="{ tableData, tableDataChild }">
        <hd-form :value="tableData.form">
          <template #form-deptId="{ data, field }">
            <dept-select v-model="data[field.prop]" />
          </template>
          <template #form-postId="{ data, field }">
            <el-select v-model="data[field.prop]" clearable placeholder="请选择考勤类型" style="width: 100%">
              <el-option v-for="dict in systemList" :key="dict.postId" :label="dict.postName" :value="dict.postId"></el-option>
            </el-select>
          </template>
          <template #form-enable="{ data, field }">
            <el-switch v-model="data[field.prop]" :active-value="true" :inactive-value="false"></el-switch>
          </template>
          <template #form-hiredate="{ data, field }">
            <el-date-picker
              style="width: 100%"
              v-model="data[field.prop]"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              @change="(params) => handleIdCardChange(data, params)"></el-date-picker>
          </template>
          <template #form-idCardNumber="{ data, field }">
            <el-input
              v-model="data[field.prop]"
              placeholder="请输入身份证号"
              maxlength="18"
              @change="(params) => handleIdCardChange(data, params)"></el-input>
          </template>
          <template #form-birthDate="{ data, field }">
            <el-date-picker style="width: 100%" v-model="data[field.prop]" type="date" value-format="yyyy-MM-dd" disabled></el-date-picker>
          </template>
          <template #form-picture="{ data, field }">
            <image-upload style="width: 100%" v-model="data[field.prop]" :scale="200" :limit="1"></image-upload>
          </template>
        </hd-form>
      </template>
    </hd-table-page>
  </div>
</template>

<script>
//基础人员信息
import BaseService from '@/api/base/base'
import { Image } from 'echarts/lib/util/graphic'
const baseService = new BaseService('attendance/person')
//获取职位
const systemService = new BaseService('system/post')
export default {
  name: 'EmployeeAttendance',
  data() {
    return {
      // 导出遮罩层
      columns: [
        { type: 'index', label: '#', align: 'center' },
        { prop: 'personNo', label: '工号', required: true, disabledEdit: true },
        { prop: 'personName', label: '姓名', required: true, disabledEdit: true },
        { prop: 'deptId', label: '部门', minWidth: '150px', required: true, isColumn: false },
        { prop: 'deptName', label: '部门', minWidth: '150px', isField: false, isSearch: false },
        { prop: 'postId', label: '职位', minWidth: '150px', required: true, isColumn: false },
        { prop: 'postName', label: '职位', minWidth: '150px', isField: false, isSearch: false },
        { prop: 'hiredate', label: '入职时间', isSearch: false },
        { prop: 'phone', label: '手机号', isSearch: false, rule: { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' } },
        { prop: 'idCardName', label: '证件姓名', isSearch: false },
        {
          prop: 'idCardNumber',
          label: '证件号码',
          isSearch: false,
          minWidth: '120px',
          rule: { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' },
        },
        { prop: 'idCardAddress', label: '证件地址', isSearch: false },
        { prop: 'birthDate', label: '出生日期', isSearch: false, disabled: true },
        { prop: 'age', label: '年龄', isSearch: false, disabled: true },
        { prop: 'workAge', label: '工龄', isSearch: false, disabled: true },
        { prop: 'picture', label: '照片', isSearch: false, disabled: true },
        {
          prop: 'enable',
          label: '启用',
          isSearch: false,
          formatter: (row, col, val) => {
            val = val ? '启用' : '禁用'
            return val
          },
        },
      ],
      defaultData: {
        form: {
          enable: true,
        },
      },
      systemList: [],
    }
  },
  created() {
    systemService.getList({ pageNum: 1, pageSize: 1000 }).then((res) => {
      this.systemList = res.rows.filter((row) => row.postId !== 1)
    })
  },
  methods: {
    handleIdCardChange(data, params) {
      let birthday = null
      let age = null
      let workAge = null

      if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(data.idCardNumber)) {
        birthday = this.$moment(data.idCardNumber.substring(6, 14), 'YYYYMMDD').format('YYYY-MM-DD')
        age = this.$moment().diff(birthday, 'years')
      }
      workAge = this.$moment().diff(data.hiredate, 'years')

      Object.assign(data, { birthDate: birthday, age: age, workAge: workAge })
    },
  },
}
</script>

<style lang="scss" scoped></style>
